<template>
	<view>
		<u-navbar
			title="售后"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view  @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else-if="!loading && list.length === 0">
				<u-empty
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</template>
			<template v-else-if="!loading && list.length > 0">
				<view style="padding: 32rpx;">
					<view class="shop-order-item" v-for="order in list" :key="order.id">
						<view class="shop-order-item-t">
							<view class="shop-order-item-t-l">
								<u--image radius="8rpx" mode="aspectFill" :src="appInfo.logo[0].url" width="38rpx" height="34rpx"></u--image>
								<view style="width: 16rpx;"/>
								<view class="shop-order-item-t-l-1 u-line-1">{{appInfo.name}}</view>
							</view>
							<view class="shop-order-item-t-r">
								<text>{{order.refundStatus_dictText}}</text>
							</view>
						</view>
						<view @click="toDetail(order)" class="shop-order-item-m">
							<u--image class="shop-order-item-m-l" radius="16rpx" mode="aspectFill" :src="order.adoptSku.image[0].url" width="160rpx" height="160rpx"></u--image>
							<view class="shop-order-item-m-m">
								<view class="u-line-2">{{order.detailList[0].name.split('#')[0]}}</view>
								<view style="font-size: 24rpx;color: #666;margin-top: 16rpx;" class="u-line-2">{{order.adoptSku.sku}}</view>
							</view>
							<view class="shop-order-item-m-r">
								<text>x{{order.adoptOrder.buyCount}}</text>
							</view>
						</view>
						<view class="shop-order-item-b">
							<text>实付:</text>
							<text style="padding-left: 16rpx;font-size: 32rpx;color: #f40215;">&yen;{{order.payPrice}}</text>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {adoptAfterOrder, addBatch} from '@/api/me.js';
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 6,
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			// 再来一单
			toBuy({detailList}) {
				let list = [];
				detailList.forEach(item => {
					const {buyCount, goodsId, skuId} = item
					let obj = {};
					obj.goodsId = goodsId;
					obj.buyCount = buyCount;
					obj.isChecked = true;
					if(skuId) {
						obj.skuId = skuId;
					}
					list.push(obj);
				});
				addBatch(list).then(res => {
					let url = `/pages/shop/shopCart`;
					this.$cuNavigateTo(url);
				})
			},
			// 详情
			toDetail({id}) {
				let url = `/pages/me/fosterOrderDetail1?id=${id}`;
				this.$cuNavigateTo(url);
			},
			getList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				adoptAfterOrder(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.list = empty.concat(records);
					} else {
						this.list = this.list.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
						this.pageNo ++;
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.shop-order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		.shop-order-item-t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shop-order-item-t-l {
				display: flex;
				align-items: center;
				width: calc(100% - 200rpx);
				.shop-order-item-t-l-1 {
					color: #000;
					line-height: 30rpx;
					font-size: 30rpx;
				}
			}
			.shop-order-item-t-r {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #666;
			}
		}
		.shop-order-item-m {
			margin: 32rpx 0;
			height: 160rpx;
			display: flex;
			align-items: center;
			.shop-order-item-m-m {
				width: calc(100% - 208rpx);
				font-size: 28rpx;
				color: #333;
				padding-left: 16rpx;
				box-sizing: border-box;
			}
			.shop-order-item-m-r {
				width: 48rpx;
				display: flex;
				color: #666;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
			}
		}
		.shop-order-item-b {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #333;
		}
		.shop-order-item-bb {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.shop-order-item-bb-btn {
				width: 160rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>